<template>
	<view>
		<uni-popup ref="popupAssistanceOne" :animation="false" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick('popupAssistanceOne')">
			<view class="oneBox_box">
				<view class="oneBox">
					<view class="one_box_ewm">
						<image :src="img" mode=""></image>
					</view>
				</view>
				<view class="two_box_close" @click="close('popupAssistanceOne')">
					<uni-icons type="closeempty" size="20" color="#FFFFFF"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupAssistanceTwo" :animation="false" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick('popupAssistanceTwo')">
			<view class="twoBox">
				<view class="two_box_title">
					<image class="t_img" :src='mainImageUrl+"/static/my/peerAssistance/p_icon_05.png"' mode=""></image>
					<text class="t_word">奖励明细</text>
					<image class="t_img" :src='mainImageUrl+"/static/my/peerAssistance/p_icon_07.png"' mode=""></image>
				</view>
				<view class="two_box_close" @click="close('popupAssistanceTwo')">
					<uni-icons type="closeempty" size="13" color="#FFFFFF"></uni-icons>
				</view>
				<view class="pListBox">
					<view class="pListBox_li first_child">
						<view class="li_item">好友昵称</view>
						<view class="li_item">奖励积分</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
						<view class="pListBox_li" v-for="(item,index) in userList" :key="index" :class="index == 0?'second_child':''">
							<view class="li_item">{{item.nickName}}</view>
							<view class="li_item">{{item.reward}}</view>
						</view>
						</block>
						<block v-else>
							<view class="pListBox_li" style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="know" @click="close('popupAssistanceTwo')">知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupAssistanceThree" :animation="false" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick('popupAssistanceThree')">
			<view class="three_body">
				<view class="threeBox">
					<view class="three_box_title">
						<!-- <image src="/static/my/peerAssistance/p_icon_bg01.png" mode=""></image> -->
						<view class="three_box_word">活动规则</view>
					</view>
					<view class="threeBoxBody">
						<view class="tb_box_item">
							<view class="tb_title">
								<image  :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
								<text>如何参加助力活动？</text>
								<image class="tb_title_img" :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
							</view>
							<view class="tb_title_word">第一步：到店消费完成后进入活动界面；</view>
							<view class="tb_title_word">第二步：进入活动后，将链接分享给同行好友，或者面对面扫码进入助力活动页面；</view>
							<view class="tb_title_word">第三步：好友助力成功后自动发放奖励。</view>
						</view>
						<view class="tb_box_item mt24">
							<view class="tb_title">
								<image  :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
								<text>朋友如何帮我助力?</text>
								<image class="tb_title_img" :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
							</view>
							<view class="tb_title_word">第一步：通过链接或者面对面扫码进入活动</view>
							<view class="tb_title_word">第二步：到店并登录后点击助力，提示助力完成即可完成一次助力。</view>
						</view>
						<view class="tb_box_item mt24">
							<view class="tb_title">
								<image  :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
								<text>Tips</text>
								<image class="tb_title_img" :src='mainImageUrl+"/static/my/peerAssistance/p_icon_line.png"' mode=""></image>
							</view>
							<view class="tb_title_word">1、每个用户仅可助力一次</view>
							<view class="tb_title_word">2、邀请新用户可以获得更多奖励哦</view>
							<view class="tb_title_word">3、如遇任何问题可联系客服</view>
						</view>
					</view>
				</view>
				<view class="two_box_close" @click="close('popupAssistanceThree')">
					<uni-icons type="closeempty" size="20" color="#FFFFFF"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupAssistanceFour" :animation="false" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick('popupAssistanceOne')">
			<view class="fourBox">
				<view class="four_box_user">好友<text style="color: #FF3324;">{{assistanceInfo.userName}}</text>已为您助力</view>
				<view class="four_box_num">
					<view class="four_box_l">
						<text>获</text>
						<text>得</text>
					</view>
					<view class="four_box_c">{{assistanceInfo.point}}</view>
					<view class="four_box_r">{{assistanceInfo.pointType}}</view>
				</view>
				<view class="got_it" @click="close('popupAssistanceFour')">知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"invitation-popup",
		data() {
			return {
				mainImageUrl: this.mainImageUrl,
				userList:[],
				img:'',//二维码
				assistanceInfo:{},
			};
		},
		mounted() {
			// this.$refs.popupAssistanceFour.open()
		},
		methods:{
			open(obj){
				if(obj.popupName == 'popupAssistanceTwo'){
					this.userList = obj.userList
				}else if(obj.popupName == 'popupAssistanceOne'){
					this.img = obj.img.replace(/[\r\n]/g,"")
				}else if(obj.popupName == 'popupAssistanceFour'){
					this.assistanceInfo = obj.assistanceInfo
				}
				this.$refs[obj.popupName].open()
			},
			// 点击遮罩层关闭
			maskClick(popupName){
				this.$emit('closePopup',popupName)
			},
			close(popupName){
				this.$refs[popupName].close()
				this.$emit('closePopup',popupName)
			}
		}
	}
</script>

<style scoped>
	/* 弹窗一 */
	.oneBox{
		width: 688rpx;
		height: 912rpx;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/c8b10480b043452faed8a92e230b89e3.png') no-repeat;
		background-size: 100% 100%;
		/* margin-bottom: 150rpx; */
		padding-top: 298rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	.one_box_ewm{
		width: 438rpx;
		height: 438rpx;
		background: #fff;
		border: 4rpx solid #FF7439;
		border-radius: 12rpx;
		overflow: hidden;
	}
	.one_box_ewm image{
		width: 100%;
		height: 100%;
		transform: scale(1.01);
	}
	/* end */
	
	/* 弹窗二 */
	.twoBox{
		width: 630rpx;
		max-height: 1054rpx;
		background: linear-gradient(180deg, #FFB060 0%, #FF613F 73.33%, #FFA35B 100%);
		border-radius: 32rpx;
		padding-bottom: 50rpx;
		position: relative;
	}
	.two_box_close{
		position: absolute;
		right: 18rpx;
		top: 18rpx;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		border: 2rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.two_box_title{
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.t_word{
		margin: 0 6rpx;
		color: #903B17;
		font-size: 36rpx;
		line-height: 48rpx;
		font-weight: bold;
	}
	.two_box_title .t_img{
		width: 26rpx;
		height: 30rpx;
	}
	
	.pTitle {
		padding: 40rpx 0;
		text-align: center;
		width: 100%;
		font-size: 36rpx;
		color: #222222;
	}
	
	.scrollView {
		width: 100%;
		margin: 0 auto;
		max-height: 640rpx;
	}
	
	.pListBox {
		width: 550rpx;
		background: #FEF8EC;
		border-radius: 20rpx;
		max-height: 724rpx;
		overflow: hidden;
		margin: 0 auto;
		border: 1rpx solid #E6E6E6;
	}
	
	.pListBox .pListBox_li {
		width: 100%;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #EBC9A0;
		color: #333333;
		font-size: 28rpx;
	}
	
	.pListBox .pListBox_li .li_item:first-child {
		border-right: 1rpx solid #EBC9A0;
	}
	
	.pListBox .first_child {
		font-size: 30rpx;
		height: 70rpx;
		background: #FFDEB7;
		color: #903B17;
	}
	.pListBox .second_child{
		color: #FF3324;
	}
	.pListBox .pListBox_li:last-child {
		border-bottom: unset;
	}
	
	.pListBox .pListBox_li .li_item {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.know {
		width: 200rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 16rpx;
		border: 2rpx solid #ffffff;
		line-height: 72rpx;
		font-size: 30rpx;
		text-align: center;
		color: #ffffff;
	}
	/* end */
	
	/* 弹窗三 */
	.threeBox{
		width: 630rpx;
		padding: 10rpx 0;
		border-radius: 24rpx;
		background: linear-gradient(160.75deg, #FD8B43 5.04%, #F05119 66.48%);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.three_box_title{
		position: absolute;
		top: -14rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 290rpx;
		height: 72rpx;
		border-radius: 24rpx;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/7af5bdf575374d4390949da7a30c65d0.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		/* align-items: center; */
		justify-content: center;
	}
	.three_box_word{
		margin-top: 10rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}
	.threeBoxBody{
		border-radius: 24rpx;
		width: 606rpx;
		box-sizing: border-box;
		background: #FEF8EC;
		padding-top: 88rpx;
		padding-bottom: 50rpx;
	}
	.tb_box_item{
		
	}
	.tb_title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 18rpx;
	}
	.tb_title image{
		width: 94rpx;
		height: 2rpx;
	}
	.tb_title text{
		margin: 0 8rpx;
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
	}
	.tb_title_img{
		transform: rotate(180deg);
	}
	.tb_title_word{
		font-size: 30rpx;
		color: #222222;
		line-height: 48rpx;
		margin-bottom: 12rpx;
		padding: 0 6rpx 0 30rpx;
	}
	.three_box_title image{
		width: 100%;
		height: 100%;
	}
	.mt24{
		margin-top: 24rpx;
	}
    .three_body .two_box_close,.oneBox_box .two_box_close{
		position: unset;
		width: 64rpx;
		height: 64rpx;
		/* padding-top: 4rpx; */
		margin: 0 auto;
		margin-top: 50rpx;
	}
	/* end */
	/* 弹窗四 */
	.fourBox{
		width: 688rpx;
		height: 706rpx;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/217fc9c76eb44c438c8c5fe39a2dc7ca.png') no-repeat;
		background-size: 100% 100%;
		/* margin-bottom: 150rpx; */
		padding-top: 280rpx;
		box-sizing: border-box;
	}
	.four_box_user{
		width: fit-content;
		padding: 10rpx 30rpx;
		border-radius: 120rpx;
		background: #FFD8A7;
		box-shadow: 0rpx 2rpx 0rpx 0rpx #F2C58E inset;
		color: #BF4916;
		font-size: 28rpx;
		margin: 0 auto;
	}
	.four_box_num{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 34rpx;
	}
	.four_box_l{
		width: fit-content;
		padding: 8rpx 4rpx;
		border-radius: 200rpx;
		background: linear-gradient(180deg, #FF8616 20.12%, #F23006 79.27%);
		color: #fff;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.four_box_c{
		font-family: Roboto;
		font-size: 140rpx;
		font-weight: 700;
		line-height: 164rpx;
		background: linear-gradient(180deg, #FF8616 20.12%, #F23006 79.27%);
		-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;/*给文字设置成透明*/
	}
	.four_box_r{
		font-size: 40rpx;
		font-weight: 400;
		align-self: flex-end;
		margin-bottom: 20rpx;
		background: linear-gradient(180deg, #FF8616 20.12%, #F23006 79.27%);
		-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;/*给文字设置成透明*/
	}
	.got_it{
		width: 254rpx;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		border-radius: 200rpx;
		color: #fff;
		margin: 0 auto;
		margin-top: 50rpx;
		background: linear-gradient(91.06deg, #FDB93B 0.22%, #FE4300 47.3%, #FE1F5C 96.91%);
	}
	/* end */
</style>